
<template>
  <el-dialog v-dialogDrag :visible.sync="currentDialogVisible" :top="common.getDialogTop()" title="打开报表文件" class="dialog-container" width="750px" append-to-body @opened="dialogOpened">
    <el-form ref="form" :model="formData" label-width="120px">
      <el-form-item label="报表来源：">
        <el-select v-model="formData.prefix" placeholder="请选择报表来源" class="w-400" @change="providerChange">
          <el-option v-for="(item, index) in providers" :key="index" :label="item.name" :value="item.prefix"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="reportFiles" max-height="500px" style="width: 100%">
      <el-table-column prop="name" label="文件名" align="left" header-align="left">
      </el-table-column>
      <el-table-column prop="updateDate" label="修改日期" width="180">
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="{row, column}">
          <el-button type="text" size="small" @click="openFile(row)">
            <i class="ureport ureport-open"></i> <span>打开</span>
          </el-button>
          <el-button type="text" size="small" @click="deleteFile(row)">
            <i class="el-icon-yrt-shanchu1"></i><span>删除</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="currentDialogVisible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import eventBus from "@/utils/eventBus";

export default {
  props: {
    designer: {
      type: Object,
      default: () => {
        return {};
      }
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isLoading: false,
      datasource: null,
      formData: {
        fileName: null,
        prefix: null
      },
      sourceList: ["oracle.jdbc.OracleDriver", "com.ibm.db2.jcc.DB2Driver", "com.microsoft.sqlserver.jdbc.SQLServerDriver", "com.mysql.jdbc.Driver"],
      providers: [], // 存储类型
      reportFilesData: {}, // 报表文件数据
      reportFiles: [] // 报表文件列表
    };
  },
  computed: {
    // 显示窗口
    currentDialogVisible: {
      get: function () {
        return this.visible;
      },
      set: function (val) {
        this.$emit("update:visible", val);
      }
    }
  },
  mounted () {
    this.bindEvent();
  },
  methods: {
    // 事件处理
    bindEvent () {
      // 文件删除后事件
      eventBus.$on("bi-delete-success-after", () => {
        this.getProviders();
      });
    },
    deleteFile (row) {
      this.$confirm("确定要删除当前报表文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const fileName = `${row.name}`;
          this.designer.deleteFile(fileName);
        })
        .catch(() => {
          this.$message.info("已取消打开文件");
        });
    },
    openFile (row) {
      this.$confirm("确定要打开当前报表文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const file = `file:${row.name}`;
          this.designer.loadFile(file);
          this.currentDialogVisible = false;
        })
        .catch(() => {
          this.$message.info("已取消打开文件");
        });
    },
    // 打开时加载文件列表
    dialogOpened () {
      this.getProviders();
    },
    // 获取存储类型
    getProviders () {
      const url = "/designer/loadReportProviders";
      const data = {};
      this.designer.ajax(url, data, res => {
        if (res.code !== 200) {
          this.$message.error("获取报表文件失败！");
          return;
        }
        this.providers = res.data;
        if (this.providers.length) {
          this.formData.prefix = this.providers[0].prefix;
          this.providerChange();
        }
      });
    },
    // 改变存储目的地
    providerChange () {
      this.reportFiles = [];
      const provider = this.providers.find(item => item.prefix === this.formData.prefix);
      if (provider) {
        this.reportFiles = provider.reportFiles;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-container {
  padding: 0;
  .tip-item {
    line-height: 28px;
    color: darkgrey;
  }
}
</style>
